<template>
  <div class="calculator-wrap">
    <div class="listening-reading-count-area">
      <div class="type-switch" :class="calcTypeSwitchClass" @click="changeType"></div>
      <div class="line">
        <div class="title">
          <div class="inner">{{type}}类雅思听力</div>
        </div>
        <div class="input-container">
          <van-field
            :value="listeningCount"
            @change="changeListeningCount"
            placeholder="输入错题题目"
            type="number"
            placeholder-style="font-size:12px;color:#3D475C;font-weight:100;"
            :border="false"
          />
        </div>
      </div>
      <div class="line">
        <div class="title">
          <div class="inner">{{type}}类雅思阅读</div>
        </div>
        <div class="input-container">
          <van-field
            :value="readingCount"
            @change="changeReadingCount"
            placeholder="输入错题题目"
            type="number"
            placeholder-style="font-size:12px;color:#3D475C;font-weight:100;"
            :border="false"
          />
        </div>
      </div>
      <div class="bottom-area">
        <div class="result-area">
          <div class="result-item">{{ listeningResult }}</div>
          <div class="result-item">{{ readingResult }}</div>
        </div>
        <div class="btn-area">
          <van-button color="#FFA722" size="normal" @click="calcListeningAndReading">得出分数</van-button>
        </div>
      </div>
    </div>
    <div class="total-count-area">
      <div class="title">总分计算</div>
      <div class="line">
        <div class="label">
          <div class="inner">雅思听力</div>
        </div>
        <div class="input-container">
          <van-field
            :value="total_listening"
            placeholder="输入分数"
            @change="(ev) => {changeTotalScore(ev, 'total_listening')}"
            type="number"
            placeholder-style="font-size:12px;color:#3D475C;font-weight:100;"
            :border="false"
          />
        </div>
      </div>
      <div class="line">
        <div class="label">
          <div class="inner">雅思阅读</div>
        </div>
        <div class="input-container">
          <van-field
            :value="total_reading"
            @change="(ev) => {changeTotalScore(ev, 'total_reading')}"
            placeholder="输入分数"
            type="number"
            placeholder-style="font-size:12px;color:#3D475C;font-weight:100;"
            :border="false"
          />
        </div>
      </div>
      <div class="line">
        <div class="label">
          <div class="inner">雅思口语</div>
        </div>
        <div class="input-container">
          <van-field
            :value="total_speaking"
            @change="(ev) => {changeTotalScore(ev, 'total_speaking')}"
            placeholder="输入分数"
            type="number"
            placeholder-style="font-size:12px;color:#3D475C;font-weight:100;"
            :border="false"
          />
        </div>
      </div>
      <div class="line">
        <div class="label">
          <div class="inner">雅思写作</div>
        </div>
        <div class="input-container">
          <van-field
            :value="total_writing"
            @change="(ev) => {changeTotalScore(ev, 'total_writing')}"
            placeholder="输入分数"
            type="number"
            placeholder-style="font-size:12px;color:#3D475C;font-weight:100;"
            :border="false"
          />
        </div>
      </div>
      <div class="bottom-area">
        <div class="left">{{ totalScore }}</div>
        <div class="right">
          <van-button color="#FFA722" @click="calcTotal">得出分数</van-button>
        </div>
      </div>
    </div>
    <!-- <tab-bar :activeIndex="2"></tab-bar> -->
  </div>
</template>

<script>
import listeningScoreMap from "./static/listeningScoreMap";
import GreadingScoreMap from "./static/gTypeReadingMap";
import tabBar from '../../components/tabBar';
export default {
  data() {
    return {
      type: "A",
      listeningCount: "",
      readingCount: "",
      listeningResult: "--",
      readingResult: "--",
      totalScore: "--",
      total_listening: "",
      total_reading: "",
      total_writing: "",
      total_speaking: ""
    };
  },
  computed: {
    calcTypeSwitchClass() {
      return this.type === 'A' ? 'a-type' : 'g-type';
    }
  },
  methods: {
    changeType() {
      this.type = (this.type === 'A' ? 'G' : 'A');
    },
    changeReadingCount(ev) {
      this.readingCount = ev.mp.detail;
    },
    changeListeningCount(ev) {
      this.listeningCount = ev.mp.detail;
    },
    changeTotalScore(ev, key) {
      this[key] = ev.mp.detail;
    },
    calcListeningAndReading() {
      this.listeningResult = "--";
      this.readingResult = "--";
      this.calcListening();
      this.calcReading();
    },
    checkScore() {
      // 检查雅思得分合法性
      let flag = true;
      const keyList = [
        "total_listening",
        "total_reading",
        "total_speaking",
        "total_writing"
      ];
      const scoreList = [1, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9]; // 合法分数
      keyList.forEach((key) => {
        if (scoreList.indexOf(this[key] - 0) === -1) flag = false;
      })
      return flag;
    },
    calcTotal() {
      if (this.checkScore()) {
        const averageScore =
          ((this.total_listening - 0) +
            (this.total_reading - 0) +
            (this.total_speaking - 0) +
            (this.total_writing - 0)) / 4;
        const integer = Math.floor(averageScore);
        let float = (averageScore + "").split(".")[1] - 0;
        // case 1 .0/.5
        if (isNaN(float) || float === 5)
          this.totalScore = averageScore.toFixed(1);
        else if (float === 125) this.totalScore = integer.toFixed(1);
        else if (float === 625 || float === 25 || float === 375)
          this.totalScore = (integer + 0.5).toFixed(1);
        else if (float === 75 || float === 875)
          this.totalScore = (integer + 1).toFixed(1);
      } else {
        // 数据验证不通过
        this.totalScore = 'ERROR';
      }
    },
    calcListening() {
      if (!isNaN(this.listeningCount - 0)) {
        const score = listeningScoreMap[this.listeningCount];
        if (!isNaN(score)) {
          this.listeningResult = score.toFixed(1);
        }
      }
    },
    calcReading() {
      if (!isNaN(this.readingCount - 0)) {
        const score =
          this.type === "G"
            ? GreadingScoreMap[this.readingCount]
            : listeningScoreMap[this.readingCount];
        if (!isNaN(score)) {
          this.readingResult = score.toFixed(1);
        }
      }
    }
  },
  components: {
    tabBar
  }
};
</script>

<style lang="less" scoped>
.calculator-wrap {
  background: #f9f9f9;
  height: 100vh;
  padding-bottom: 60px;
  .listening-reading-count-area {
    margin-left: 50px;
    margin-right: 70px;
    padding-top: 40px;
    .type-switch {
      width:22px;
      height: 22px;
      position: absolute;
      right: 28px;
      top: 20px;
      background-size: cover !important;
    &.a-type {
      background:url('http://cdn.ielts.group/%E8%BD%AC%E6%8D%A2%E5%99%A8A%403x.png') center center no-repeat;
    }
    &.g-type {
      background:url('http://cdn.ielts.group/%E8%BD%AC%E6%8D%A2%E5%99%A8G%403x.png') center center no-repeat;
    }
    }
    .line {
      display: flex;
      .title {
        font-size: 12px;
        width: 70px;
        flex: none;
        font-weight: 600;
        color: #3d475c;
        margin-right: 8px;
        .inner {
          display: block;
          margin-top: 20px;
        }
      }
      .input-container {
        flex: 1 1 auto;
        width: 100%;
      }
    }
    .bottom-area {
      margin-top: 28px;
      display: flex;
      .result-area {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .result-item {
          font-size: 13px;
          color: #ffa722;
          text-align: center;
        }
        .btn-area {
          width: 116px;
        }
      }
    }
  }
  .total-count-area {
    margin: 20px 28px 0 28px;
    background: #fff;
    box-shadow: 0px 9px 18px 0px rgba(220, 221, 224, 1);
    border-radius: 8px;
    padding: 15px 24px 21px 22px;
    .title {
      color: #a8a8a8;
      font-size: 16px;
      text-align: center;
      margin-bottom: 24px;
    }
    .line + .line {
      margin-top: 20px;
    }
    .inner {
      display: block;
      margin-top: 20px;
    }
    .bottom-area {
      margin-top: 28px;
      display: flex;
      align-items: center;
    }
    .left {
      flex: 1 1 auto;
      text-align: center;
      font-weight: 600;
      font-size: 36px;
      color: rgba(255, 167, 34, 1);
    }
    .right {
      flex: none;
      width: 116px;
    }
  }
}
</style>

<style lang="less">
.van-cell {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(61, 71, 92, 0.5);
  padding-bottom: 3px !important;
  padding-left: 3px !important;
}
.calculator-wrap {
  .van-button__text {
    color: #fff;
  }
  .van-button {
    border-radius: 4px;
  }
  .line {
    display: flex;
    .label {
      font-size: 12px;
      font-weight: 600;
      color: rgba(61, 71, 92, 1);
      margin-right: 10px;
      width: 48px;
    }
  }
}
</style>
